<template>
    <div class="main_container" style="width: 100%">
        <el-header style="text-align: right; font-size: 12px">
            <div class="pageHeader_container">
                <el-page-header @back="backManage" content="新增药品信息"></el-page-header>
            </div>
        </el-header>
        <el-main>
            <div class="edit_container">
                <div class="edit_form_container">
                    <el-form :model="drugs" ref="drugForm" :rules="rules" label-width="80px"
                             class="drugsForm" label-position="top">

                        <el-row :gutter="20">

                            <el-col :span="17">
                                <el-form-item label="药品名称" prop="DrugsName">
                                    <el-input v-model="drugs.DrugsName" maxlength="20"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="药品编码" prop="DrugsCode">
                                    <el-input v-model="drugs.DrugsCode" maxlength="20" type="number"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="药品规格" prop="drugsformat">
                                    <el-input v-model="drugs.DrugsFormat" maxlength="10"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="包装单位" prop="drugsunit">
                                    <el-input v-model="drugs.DrugsUnit" maxlength="10"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="药品类型" prop="drugstypeid">
                                    <el-input v-model="drugs.DrugsTypeID" maxlength="10"></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="15">
                                <el-form-item label="生产厂家" prop="manufacturer">
                                    <el-input v-model="drugs.Manufacturer" maxlength="20"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="药品单价" prop="DrugsPrice">
                                    <el-input v-model="drugs.DrugsPrice" maxlength="10"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                    </el-form>
                </div>
                <div class="edit_button_container">
                    <el-button round class="submit_container" @click="submit()">提交</el-button>
                    <el-button round class="reset_container" @click="$router.push('/home/pharmacy/manage');">取消</el-button>
                </div>
            </div>

        </el-main>
    </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
    name: "newDrugs",
    data() {
        return {
            drugs: {
                DrugsCode: "",
                DrugsName: "",
                DrugsFormat: "",
                DrugsUnit: "",
                Manufacturer: "",
                DrugsDosageID: "",
                DrugsTypeID: "",
                DrugsPrice: "",
                MnemonicCode: "",
                CreationDate: "",
                LastUpdateDate: "",
                DelMark: ""
            },
            rules: {
                DrugsName: [{required: true, message: '药品名不能为空', trigger: 'blur'}],
                DrugsCode: [{required: true, message: '药品编码不能为空', trigger: 'blur'}],
                DrugsPrice: [
                    {required: true, message: '药品单价不能为空', trigger: 'blur'},
                    {
                        type: 'float', message: '药品单价只能填写有小数点的数字', trigger: 'blur',
                        transform(value) {
                            return Number(value)
                        }
                    }],

            },
            queryId: "",
        }
    },
    methods: {
        backManage() {
            this.$router.push('/home/pharmacy/manage');
        },
        submit() {

            let loginValid;
            this.$refs.drugForm.validate((valid) => {
                loginValid = valid;
                if (!loginValid) {
                    this.$message({
                        message: '请按要求输入药品信息',
                        type: 'warning'
                    });
                }
            })
            if (!loginValid) {
                return;
            }

            this.drugs.CreationDate = this.getNowTime();
            this.drugs.DelMark = 1;
            // console.log(this.drugs)
            axios.put('http://localhost:8888/drugs/put/?' + qs.stringify(this.drugs)).then((response) => {
                if (response.status == "200") {
                    this.$message({
                        message: '药品信息添加成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error("药品数据添加失败");
                }
                this.$router.push('/home/pharmacy/manage');
            }).catch((error) => {
                console.log(error);
            });
        },
        getNowTime: function () {
            let dateTime
            let yy = new Date().getFullYear()
            let mm = new Date().getMonth() + 1
            let dd = new Date().getDate()
            let hh = new Date().getHours()
            let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
                    :
                    new Date().getMinutes()
            let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
                    :
                    new Date().getSeconds()
            dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
            // console.log(dateTime)
            return dateTime
        }
    }
}
</script>

<style scoped>
.edit_container {
    height: 509px;
    background: #fff;
    border-radius: 12px;
    /*box-shadow: 3px 0 22px 0 rgba(0,0,0,0.10);*/
    box-shadow: rgba(144, 142, 142, 0.17) 0 0 6px 0;

    margin-top: 20px;
    margin-left: 29px;
    margin-right: 29px;
    padding-top: 31px;
    padding-bottom: 30px;
}

.edit_form_container {
    padding-left: 30px;
    padding-right: 30px;
}

.pageHeader_container .edit_refresh {
    position: relative;
    top: -40px;
    right: 1015px;
    background-color: #C8E3D4;
    transition: 0.2s;
}

.edit_button_container {
    padding: 25px 0 0;
    margin: 0 -30px -5px;
    border-top: 1px solid #f5efee;
    text-align: center;
    width: 100%;

}

.edit_button_container span {
    line-height: 40px;
}

.edit_refresh:hover,
.edit_refresh:active,
.edit_refresh:focus {
    color: #8E837C;
    border-color: #DFD3C3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

.submit_container,
.reset_container {
    height: 40px;
    margin: 0 15px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 1px 26px;
    width: 170px;
    text-align: center;
    border-radius: 20px;
    color: rgb(51, 41, 41);
    transition: 0.2s;
}

.submit_container {
    background-color: #ffb200;
}

.submit_container:hover, .reset_container:hover,
.submit_container:active, .reset_container:active,
.submit_container:focus, .reset_container:focus {
    color: rgb(51, 41, 41);
    border-color: #DCDFE6;
    background-color: #ecf5ff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

.reset_container:hover, .reset_container:active,
.reset_container:focus {
    background-color: #FFFFFF;
}

.submit_container:hover,
.submit_container:active,
.submit_container:focus {
    background-color: #ffb200;
}
</style>
